/* * @Author: wangsh  * @Date: 2019-05-11 19:45:15  */
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Menu, Layout, Icon } from 'antd';
import { MANAGE_TITLE } from '../../config';
import MenuConfig from './menuConfig';
import './style.scss';

const { SubMenu } = Menu;
const { Sider } = Layout;

export default class NavLeft extends Component {
  state = {
    menuTreeNode: null
  }

  componentDidMount() {
    const menuTreeNode = this.renderMenu(MenuConfig);
    this.setState({
      menuTreeNode
    });
  }

  // 菜单渲染
  renderMenu = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <SubMenu
            title={(
              <span>
                <Icon type={item.icon || 'heart'} />
                <span className="nav-text">{item.title}</span>
              </span>
            )}
            key={item.key}
          >
            { this.renderMenu(item.children) }
          </SubMenu>
        );
      }
      return (
        <Menu.Item title={item.title} key={item.key}>
          <NavLink
            to={item.key}
            onClick={() => {
              window.document.title = item.title;
            }}
          >
            <Icon type={item.icon || 'heart'} />
            <span>{item.title}</span>
          </NavLink>
        </Menu.Item>
      );
    });
  }

  render() {
    return (
      <Sider
        breakpoint="lg"
        onCollapse={this.onCollapse}
        mode="inline"
      >
        <div className="logo">
          <h1>{MANAGE_TITLE}</h1>
        </div>
        <Menu
          theme="dark"
        >
          { this.state.menuTreeNode }
        </Menu>
      </Sider>
    );
  }
}
